<template>
  <div class="clr5">
    <div class="flx-bm px20 py10 bdb11-1px">
      <span>订单号：{{bill.bill_id}}</span>
      <span class="clr1">{{bill.status}}</span>
    </div>
    <div v-for="(i,n) in bill.products" :key="n" class="flx px20 py10 bdb11-1px">
      <div>
        <img :src="i.img" class="w60 h60" alt="">
      </div>
      <div class="flx-g-1">
        <div class="flx-bm">
          <span class="pl10">{{i.title}}</span>
          <span class="clr7">￥{{i.price}}</span>
        </div>
        <div class="flx-bm">
          <span>{{i.color}}</span>
          <span class="clr7 fz8">x{{i.count}}</span>
        </div>
      </div>
    </div>
    <div class="px20 py10">
      <div class="fz8 flx-rm">
        <span class="pr20">共{{bill.total_count}}件商品</span>
        <span class="pr20">运费：0.00</span>
        <span>总计：￥{{bill.total_price}}</span>
      </div>
      <div class="txt-r pt20 flx-rm">
        <my-button class="px5 py2 fz8 clr7 bd7 flx-mm" @click.native="onClickDelete">删除订单</my-button>
      </div>
    </div>
  </div>
</template>

<script>
  import myButton from 'assets/myTools/vueTools/com/common/button/button'
  export default {
    components: {
      myButton
    },
    props: {
      bill: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    methods: {
      onClickDelete(){
        this.$emit('delete-bill')
      }
    }
  }
</script>

<style scoped>

</style>
